<script setup>
import { onBeforeMount, reactive, ref } from "vue";
import { useSectorsStore, useUserStore } from "@/stores/counter";
import { addStaff, getStaff, modStaff } from "@/api/staff";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import { timestampToTime } from "@/public/public";
const userStore = useUserStore();
const sectorStore = useSectorsStore();
const router = useRouter();

const token = userStore.userMsg.token;
const ruleFormRef = ref();
const form = ref({
  token,
  cardId: "",
  staffName: "",
  sex: null,
  nation: "",
  mianmao: null,
  address: "",
  tel: "",
  sectorId: "",
  staffType: null,
  job: "",
  workStatus: null,
  salary: null,
  school: "",
  major: "",
  degree: null,
  graDate: null,
  eduBg: null,
  desc: "",
});
const title = ref();
// type  0——详情 1——编辑 2——添加
// ops  传来的参数
const props = defineProps(["type", "id"]);
// const operaStatus = ref();
// operaStatus.value = props.type;
const canEdite = ref(false);

onBeforeMount(() => {
  if (props.type === "0") {
    getStaff({ token, staffId: props.id }).then(res => {
      canEdite.value = true;
      title.value = "员工详情页";
      form.value = { ...res.data.data[0], token };
      console.log(res.data.data[0].joinTime)
      form.value.joinTimeShow = timestampToTime(res.data.data[0].joinTime)
    });
  }
  if (props.type === "1") {
    getStaff({ token, staffId: props.id }).then(res => {
      canEdite.value = false;
      title.value = "编辑员工信息";
      form.value = { ...res.data.data[0], token };
      console.log(res.data.data[0].joinTime)

      form.value.joinTimeShow = timestampToTime(res.data.data[0].joinTime)

    });
  }
  if (props.type === "2") {
    title.value = "添加新员工";
    canEdite.value = false;
  }
});

// do not use same name with ref

const onSubmit = async formEl => {
  console.log(formEl)
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增员工
      if (props.type === "2") {
        // 添加新员工
        addStaff(form.value)
          .then(res => {
            if (res.data.code === 2) {
              ElNotification.success({
                title: "操作结果",
                message: res.data.msg,
                showClose: false,
                offset: 100,
              });
              router.push({ path: "/staff" });
            } else {
              console.log(res.data.msg);
              ElNotification.error({
                title: "操作结果",
                message: res.data.msg,
                showClose: false,
                offset: 100,
              });
            }
          })
          .catch(err => {
            console.log(err);
            ElNotification.error({
              title: "操作结果",
              message: res.data.msg,
              showClose: false,
              offset: 100,
            });
          });
      }
      // 修改员工
      else {
        // 修改员工信息
        modStaff(form.value)
          .then(res => {
            // console.log(res.data)
            if (res.data.code === 1) {
              ElNotification.success({
                title: "操作结果",
                message: res.data.msg,
                showClose: false,
                offset: 100,
              });
              router.push({ path: "/staff" });
            } else {
              console.log(res.data.msg);
              ElNotification.error({
                title: "操作结果",
                message: res.data.msg,
                showClose: false,
                offset: 100,
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    } else {
      console.log("error submit!", fields);
      ElNotification.error({
        title: "操作结果",
        message: "表单验证失败",
        showClose: false,
        offset: 100,
      });
    }
  });
};

const resetForm = formEl => {
  if (!formEl) return;
  form.value = {};
  formEl.resetFields();
};

const rules = reactive({
  staffName: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "2-10个字", trigger: "blur" },
  ],
  cardId: [
    { required: true, message: "请输入证件号", trigger: "blur" },
    {
      pattern:
        /^[1-9]\d{5}(19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i,
      message: "请输入正确的证件号",
      trigger: "blur",
    },
  ],
  tel: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern:
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  sectorId: [{ required: true, message: "选择部门", trigger: "change" }],
  staffType: [{ required: true, message: "请选择员工类型", trigger: "change" }],
  salary: [
    { required: true, message: "请输入月薪", trigger: "blur" },
    { type: "number", message: "请输入月薪，必须是数值" },
  ],
  job: [{ required: true, message: "请输入岗位", trigger: "blur" }],
});

console.log(form.value)
</script>

<style lang="less" scoped>
.editstaff {
  .el-input,
  .el-select {
    width: 260px;
  }
  .editTitle .cont {
    display: flex;
    height: 40px;
    padding: 0px 20px;
    color: #fff;
    font-size: 20px;
    background-color: #0882d3;
    justify-content: space-between;
    align-items: center;
  }
}
.editBtn {
  width: 160px;
  height: 50px;
  margin: 0 20px;
  font-size: 20px;
}
</style>

<template>
  <div class="editstaff">
    <el-card
      class="box-card staff-view editTitle"
      :body-style="{ padding: 0, margin: 0 }">
      <div class="cont">
        <span></span>
        <h1>{{ title }}</h1>
        <el-button
          type="primary"
          plain
          @click="$router.push({ path: '/staff' })"
          size="default"
          :disabled="false"
          >返回</el-button
        >
      </div>
    </el-card>

    <el-form
      :model="form"
      label-width="120px"
      :rules="rules"
      ref="ruleFormRef"
      :disabled="canEdite">
      <!-- 第一行表头 -->
      <el-divider content-position="left">基本信息</el-divider>
      <el-row class="group"> </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="员工姓名" prop="staffName">
            <el-input v-model="form.staffName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="选择性别">
              <el-option label="男" :value="0" />
              <el-option label="女" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="籍贯">
            <el-input v-model="form.nation" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-col :span="12">
            <el-form-item label="政治面貌">
              <el-select v-model="form.mianmao" placeholder="选择政治面貌">
                <!-- 群众0 党员1 预备党员2 共青团员3 民主党派4 -->
                <el-option label="群众" :value="0" />
                <el-option label="党员" :value="1" />
                <el-option label="预备党员" :value="2" />
                <el-option label="共青团员" :value="3" />
                <el-option label="民主党派" :value="4" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="cardId">
            <el-input v-model="form.cardId" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="家庭地址">
            <el-input v-model="form.address" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="tel">
            <el-input v-model="form.tel" />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>

      <!-- 第二行表头 -->
      <el-divider content-position="left">部门信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属部门" prop="sectorId">
            <el-select v-model="form.sectorId" placeholder="选择部门">
              <!-- 需要遍历 -->
              <el-option
                v-for="item in sectorStore.sectorsMsg"
                :label="item.sectorName"
                :value="item.sectorId" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="岗位" prop="job">
            <el-input v-model="form.job" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="员工类型" prop="staffType">
            <el-select v-model="form.staffType" placeholder="选择员工类型">
              <!-- 员工类型 "正式员工0、合同工1、临时工2" -->
              <el-option label="正式员工" :value="0" />
              <el-option label="合同工" :value="1" />
              <el-option label="临时工" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="在职状态">
            <el-select v-model="form.workStatus" placeholder="选择在职状态">
              <!-- 在职状态 "在职0、离职1、退休2" -->
              <el-option label="在职" :value="0" />
              <el-option label="离职" :value="1" />
              <el-option label="退休" :value="2" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="入职时间">
            <el-input v-model="form.joinTimeShow" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月薪" prop="salary">
            <el-input v-model.number="form.salary" />元
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="离职时间">
            <el-input v-model="form.name" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行表头 -->
      <el-divider content-position="left">教育信息</el-divider>
      <el-row>
        <el-col :span="12">
          <el-form-item label="毕业院校">
            <el-input v-model="form.school" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业时间">
            <!-- <el-input v-model="form.graDate" /> -->

            <el-date-picker
              v-model="form.graDate"
              type="date"
              placeholder="选择日期"
              format="YYYY/MM/DD"
              value-format="x" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="专业">
            <el-input v-model="form.major" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历">
            <el-select v-model="form.eduBg" placeholder="选择学历">
              <!-- 学历 中专0 大专1 本科2 研究生3 -->
              <el-option label="中专" :value="0" />
              <el-option label="大专" :value="1" />
              <el-option label="本科" :value="2" />
              <el-option label="研究生" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学位">
            <el-select v-model="form.degree" placeholder="选择学位">
              <!-- 学位 无0 学士1 硕士2 博士3 -->
              <el-option label="无" :value="0" />
              <el-option label="学士" :value="1" />
              <el-option label="硕士" :value="2" />
              <el-option label="博士" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-button
          type="primary"
          @click="onSubmit(ruleFormRef)"
          size="large"
          class="editBtn"
          v-if="type === '1' || type === '2'"
          >保存</el-button
        >

        <el-button
          type="primary"
          size="large"
          class="editBtn"
          v-if="type === '2'"
          @click="resetForm(ruleFormRef)"
          >清除表单</el-button
        >
      </el-row>
    </el-form>
  </div>
</template>
